<!-- 宠物专题 -->
<template>
  <div class="petBox">
    <div class="leftPetBox">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        @select="handleSelect"
        :collapse="isCollapse"
        v-for="menuItem in categoryMenu"
        :key="menuItem.index"
        @close="handleClose"
      >
      <el-submenu :index="menuItem.bclass">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ menuItem.bclass }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="(item,index) of menuItem.children"
            :key="index"
            :index="item.variety">
            {{ item.variety }}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      </el-menu>
    </div>
    <div class="rightPetBox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="介绍" name="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ categoryMenus.introduce }}</el-tab-pane>
        <el-tab-pane label="生活习性" name="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ categoryMenus.lifeHabit }}</el-tab-pane>
        <el-tab-pane label="饲养方式" name="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ categoryMenus.feedingModel }}</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { queryCategoryMenu, queryPetContent } from '@/api/pet'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      activeMenu: '狗',
      isCollapse: false,
      categoryMenu: [],
      activeName: '1',
      varieties: '',
      habits: '',
      feature: '',
      categoryMenus:{
        introduce:'',
        lifeHabit:'',
        feedingModel:''
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    init () {
      // 加载左侧宠物类写
      queryCategoryMenu().then((res) => {
        if (res.code === 200) {
          this.categoryMenu = res.data;
          // this.$nextTick(() => {
          //   this.handleClick()
          // })
        } else {
          this.$message({
            message: '加载失败',
            type: 'warning'
          })
        }
      })
    },
    handleClose(key, keyPath) {
      this.activeMenu = key
      this.handleClick(key)
    },
    handleSelect (key, keyPath) {
      this.activeMenu = key;
      let result =  this.categoryMenu.map( m => m.children).flat().find(f=>f.variety === key);
      Object.assign(this.categoryMenus,result);
      this.handleClick()
    },
    handleClick (tab, event) {
      const parmas = {
        activeMenu: this.activeMenu,
        activeName: this.activeName
      }
      queryPetContent(parmas).then((res) => {
        if (res.code === 10000) {
          this.varieties = res.datas;
        } else {
          this.$message({
            message: '加载失败',
            type: 'warning'
          })
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.init()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  /* min-height: 400px; */
}
</style>

<style scoped>
.leftPetBox {
  width: 200px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.rightPetBox {
  margin-left: 20px;
  display: inline-block;
  vertical-align: top;
  width: 82%;
}
</style>
